<div draggable mat-dialog-title>
  <h6>{{'suImageList' | translate}}</h6>
</div>
<div mat-dialog-content>
<div class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="wdl-table-container wdl-table-container-page" style="height: 400px;">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="imageName">
        <th mat-header-cell *matHeaderCellDef>{{"imageName" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.imageName}} </td>
      </ng-container>

      <ng-container matColumnDef="imageType">
        <th mat-header-cell *matHeaderCellDef>{{"deviceType" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{('device' + element.imageType) | translate }} </td>
      </ng-container>

      <ng-container matColumnDef="imageVersion">
        <th mat-header-cell *matHeaderCellDef>{{"version" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.imageVersion}} </td>
      </ng-container>

      <ng-container matColumnDef="updateTime">
        <th mat-header-cell *matHeaderCellDef>{{"updateTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.updateTime === 0) ? '-' :  (element.updateTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button (click)="remove(element)" matTooltip="{{'remove' | translate}}">
            <mat-icon svgIcon="delete" style="color: darkred;"></mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="checkAndUpload()">{{"upload" | translate}}</button>
  <button mat-button (click)="dialogRef.close('Close')">{{"close" | translate}}</button>
</div>
